/**
 * 脚本组件
 */
function scScript(opt) {
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    var box = null;
    var scriptFuncs = null;

    /**
     * 事件类别
     */
    var evtTypes = [
        { label: "被动触发(beTrigger)", value: "beTrigger", selected: true },
        { label: "鼠标按下(mousedown)", value: "mousedown"},
        { label: "鼠标弹起(mouseup)", value: "mouseup" },
        { label: "单击(click)", value: "click" },
        { label: "双击(dblclick)", value: "dblclick" },
        { label: "变化(change)", value: "change" },
        { label: "获取焦点(focus)", value: "focus" },
        { label: "失去焦点(blur)", value: "blur" }
    ];

    /**
     * 函数类别
     */
    var funTypes = [
        { label: "常用函数", value: "common", selected: true },
        { label: "表达式", value: "expression" },
        { label: "条件语句", value: "condition" },
        { label: "查找引用", value: "find" },
        { label: "日期时间", value: "datetime" },
        { label: "文本", value: "text" },
        { label: "数学", value: "math" }
    ];

    /**
     * 所有函数
     */
    var allFuns = null;

    var listener = null;

    /**
     * 函数列表
     */
    var funSel = null;

    var description = null;
    var message = null;

    /**
     * 创建视图
     */
    this.createView = function (option) {
        option = option ? option : {};
        listener = option.listener;

        scriptFuncs = new sScriptFuncs(listener);
        allFuns = scriptFuncs.getAllFuns();

        var data = null;

        if(opt && opt.data !== undefined){
            data = opt.data;
        }else if(option && option.data !== undefined){
            data = option.data;
        }

        box = crEle("div", "sc-script");
        
        //

        row = crEle("div", "sc-script-row");
        label = crEle("label");
        let btn = crEle("button", "sc-dialog-button");

        row.style.padding = 0;
        row.style.justifyContent = "space-between";
        label.innerText = "输入代码（JS）：";
        btn.innerText = "执行";

        row.appendChild(label);
        row.appendChild(btn);
        box.appendChild(row);

        //

        row = crEle("div", "sc-script-row");
        edit = crEle("textarea", "sc-script-edit");

        row.style.padding = "4px 4px 4px 12px";

        if(data){
            edit.value = data.script;
        }

        row.appendChild(edit);
        box.appendChild(row);

        //执行按钮
        btn.addEventListener("click", (e)=>{
            let res = scriptFuncs.run(edit.value);
            if(res){
                message.innerHTML = "执行结果：" + res;
            }else{
                message.innerHTML = "执行结果：无返回值";
            }
        });

        //

        row = crEle("div", "sc-script-row");
        message = crEle("label", "sc-script-message");

        row.appendChild(message);
        box.appendChild(row);

        row = crEle("div", "sc-script-row");
        label = crEle("label");
        let select = crEle("select");

        row.style.padding = "4px 4px 4px 8px";
        label.innerText = "事件类别：";

        for (let i in evtTypes) {
            let op = crEle("option");

            op.value = evtTypes[i].value;
            op.innerText = evtTypes[i].label;

            if(evtTypes[i].selected){
                op.setAttribute("selected", true);
            }

            select.appendChild(op);
            evtTypes[i].element = op;
        }

        row.appendChild(label);
        row.appendChild(select);
        box.appendChild(row);

        //

        row = crEle("div", "sc-script-row");
        label = crEle("label");
        let selectFun = crEle("select");

        row.style.padding = "4px 4px 4px 8px";
        label.innerText = "函数类别：";

        for (let i in funTypes) {
            let op = crEle("option");

            op.value = funTypes[i].value;
            op.innerText = funTypes[i].label;

            if(funTypes[i].selected){
                op.setAttribute("selected", true);
            }

            selectFun.appendChild(op);
            funTypes[i].element = op;
        }

        row.appendChild(label);
        row.appendChild(selectFun);
        box.appendChild(row);

        //
        row = crEle("div", "sc-script-row");
        label = crEle("label");

        row.style.padding = 0;
        label.innerText = "选择函数（双击插入代码）：";

        row.appendChild(label);
        box.appendChild(row);

        //

        row = crEle("div", "sc-script-row");
        funSel = crEle("select");
        funSel.setAttribute("size", 8);

        row.style.padding = "4px 4px 4px 12px";
        insertFun(funTypes.find(it=>it.selected === true).value);

        row.appendChild(funSel);
        box.appendChild(row);

        //

        row = crEle("div", "sc-script-row");
        description = crEle("label");

        description.style.color = "#606266";
        description.innerText = "函数功能和用法说明";

        row.style.height = "80px";
        row.style.overflow = "hidden auto";
        row.style.alignItems = "flex-start";

        row.appendChild(description);
        box.appendChild(row);

        let setFun = (element)=>{
            let fun = funTypes.find(it=>it.element === element);
            insertFun(fun.value);
        };

        let setEvt = (ind)=>{
            let t = evtTypes[ind];

            if(t.value == "beTrigger"){
                selectFun.selectedIndex = funTypes.findIndex(t=>t.value == "expression");
                selectFun.disabled = true;
            }else{
                selectFun.disabled = false;
            }
            setFun(selectFun.children[selectFun.selectedIndex]);
        }

        selectFun.addEventListener("change", (e)=>{
            setFun(e.target.children[e.target.selectedIndex]);
        });

        select.addEventListener("change", (e)=>{
            setEvt(e.target.selectedIndex);
        });

        setEvt(select.selectedIndex);

        funSel.addEventListener("change", (e)=>{
            let fun = allFuns.find(it=>it.element === e.target.children[e.target.selectedIndex]);
            if(fun){
                description.innerHTML = fun.description;
            }
        });

        funSel.addEventListener("dblclick", (e)=>{
            let fun = allFuns.find(it=>it.element === e.target);
            if(fun){
                insertInTextArea(edit, fun.label + fun.param);
            }
        });

        return box;
    }

    /**
     * 将指定类型函数插入下拉框
     */
    var insertFun = function(type){
        funs = allFuns;

        if(type){
            funs = allFuns.filter(it=>it.type.indexOf(type) > -1);
        }

        funSel.innerHTML = "";
        
        for (let i in funs) {
            let op = crEle("option");
            
            op.value = funs[i].value;
            op.innerText = funs[i].label;
            
            funSel.appendChild(op);

            funs[i].element = op;
        }
    }

    /**
     * 在文本输入域焦点处插入内容
     * @param {*} textarea 
     * @param {*} value 
     */
    var insertInTextArea = function(textarea, value){
        if(document.selection){
            textarea.focus();
            
            sel = document.selection.createRange();
            sel.text = value;
            sel.select();
        }else if(textarea.selectionStart || textarea.selectionStart == '0'){
            var startPos = textarea.selectionStart;
            var endPos = textarea.selectionEnd;
            var restoreTop = textarea.scrollTop;
            
            textarea.value = textarea.value.substring(0, startPos) + value + 
                             textarea.value.substring(endPos, textarea.value.length);
            
            if (restoreTop > 0){
                textarea.scrollTop = restoreTop;
            }
            
            textarea.focus();
            textarea.selectionStart = startPos + value.length;
            textarea.selectionEnd = startPos + value.length;
        }else{
            textarea.value += value;
            textarea.focus();
        }
    }

    /**
     * 获取设置后的数据
     */
    this.getData = function(){
        return edit.value;
    }

}